import type { ReactNode } from 'react';

import Link from '@docusaurus/Link';
import Layout from '@theme/Layout';
import Heading from '@theme/Heading';
import ShowcaseCards from './_components/ShowcaseCards';

const TITLE = '社区案例';
const DESCRIPTION = '精选开源社区实践案例';

function ShowcaseHeader() {
  const handleClick = () => {
    if (typeof window !== 'undefined' && window._oafs) {
      window._oafs.action('申请开通-社区案例');
    }
  }

  return (
    <section className="margin-top--lg margin-bottom--lg text--center">
      <Heading as="h1">{TITLE}</Heading>
      <p>{DESCRIPTION}</p>
      <Link
        className="button button--primary"
        to={'https://doc.weixin.qq.com/forms/AEgAHgfCABAAaAASwZcAJwCNaAeEcl9Cf'}
        onClick={handleClick}
      >
        申请开通
      </Link>
    </section>
  );
}

export default function Showcase(): ReactNode {
  return (
    <Layout title={TITLE} description={DESCRIPTION}>
      <main className="margin-vert--lg">
        <ShowcaseHeader />
        <ShowcaseCards />
      </main>
    </Layout>
  );
}
